import { defineBoot } from '#q-app/wrappers';
import axios, { type AxiosInstance } from 'axios';

declare module 'vue' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
    $api: AxiosInstance;
  }
}

// 在使用SSR时要小心跨请求状态污染的问题，
// 因为这里创建了一个单例实例；
// 如果有任何客户端修改了这个（全局）实例，
// 最好将这个实例的创建移到下面的 "export default () => {}" 函数中，
// 该函数会为每个客户端单独运行。
const api = axios.create({ baseURL: 'https://api.example.com' });

export default defineBoot(({ app }) => {
  // 用于在 Vue 文件 (选项式 API) 中，通过 this.$axios 和 this.$api 使用

  app.config.globalProperties.$axios = axios;
  // ^ ^ ^ 这样你就可以使用 this.$axios (在Vue选项式API中)
  //       因此你无需在每个 vue 文件中都导入 axios

  app.config.globalProperties.$api = api;
  // ^ ^ ^ 这样你就可以使用 this.$api (在Vue选项式API中)
  //       因此你可以轻松地对你的应用API执行请求
});

export { api };
